<template>
  <div class="app">
    <h1>{{ msg }}-学生的名字:{{ StudentName }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父亲传递数据 -->
    <School :getSchoolName="getSchoolName"/>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父亲数据（第一种写法：使用@或v-on） -->
    <Student v-on:atguigu="getStudentName" @demo="m1" @click.native="m2"/>
      <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父亲数据（第二种写法：ref更加灵活 ） -->
      <!-- <Student ref="student"/> -->
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
name:'App',
components:{
    School,Student
},
data(){
    return {
        msg:'你好啊！',
        StudentName:''
    }
},
methods:{
    getSchoolName(name){
        console.log('App收到了学校名',name);
    },
    getStudentName(name,...res){//接收参数
        console.log('App收到了学生名'+name,res);
        this.StudentName=name
    },
    m1(){
        console.log('demoshiajn');
    },
    m2(){
        alert('123')
    }
},
mounted(){
setTimeout(()=>{
// this.$refs.student.$once('atguigu',this.getStudentName)//绑定自定义事件,触发事件+回调函数
// this.$refs.student.$on('atguigu',this.getStudentName)
},3000)
}
}
</script>

<style scoped>
.app{
    background-color: brown;
    padding: 5px;
}
</style>